import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import My from '@/views/my/index.vue'
import Queans from '@/views/queans/index.vue'
import Video from '@/views/video/index.vue'
import Home from '@/views/home/index.vue'
import Layout from '@/views/layout/index.vue'
import Search from '@/views/search/index.vue'
import Article from '@/views/article/index.vue'
import UserProfile from '@/views/user-profile/index.vue'
Vue.use(VueRouter)
// 路由表
const routes = [
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/',
    //name: 'layout', //如果父路由有默认子路由 那么它的name没有意义
    // component: () => import('@/views/layout/index.vue'),
    component: Layout,
    children: [
      {
        path: '', //为空 默认子路由 只能有一个
        name: 'home',
        component: Home,
      },
      {
        path: '/queans',
        name:'queans',
        component: Queans,
      },
      {
        path: '/video',
        name:'video',
        component: Video,
      },
      {
        path: '/my',
        name:'my',
        component: My,
      },
    ],
  },
  { path: '/search', component: Search },
  // 动态路由 '/article/:articleId' 接收文章id
  {
    path: '/article/:articleId',
    name: 'article',
    component: Article,
    // 将路由动态参数映射到组件的 props 中，更推荐这种做法
    props:true,//开启Props传参 说白了就是把路由参数映射到组件的props数据中
  },
  {path:'/user/profile',component:UserProfile}
]

const router = new VueRouter({
  routes,
})

export default router
